<template>
	<view class="body-content">
		<view class="body-top-box">
			<view class="search-box">
				<image class="search-img" :src="search_img" mode="widthFix"></image>
				<input class="search-input" confirm-type="search" @confirm="gotoSearch" v-model="search" placeholder="请输入手机号或者姓名搜索">
			</view>
		</view>
		
		<view class="address_list_box">
			<checkbox-group name="xuanze"  @change.stop='changeFun'>
					<view class="address_list_item" v-for="(item,index) in  addressList" :key='index'>
						<label :class="['radio-btn',radioTF ? 'donghua-left' : '']">
							<checkbox class="checkYuan-btn" :value="item.id"  ref="checkboxBtn" :checked="item.checked" />
						</label>
						<view :class="['address_list_item_content',radioTF ? 'donghua-left donghua-left-none' : '']" @click="select_address" :data-index="index">
							<view class="address_list_item_content_kongbai">
								<view class="address_list_item_content_kongbai_top">
									<view class="address_list_item_name">
										<view class="address_list_item_name_text">{{item.true_name}}</view>
										<view class="address_list_item_name_phone">{{item.mobile}}</view>
									</view>
									<view class="address_list_item_news">
										{{item.city}}{{item.area}}{{item.address}}
									</view>
								</view>
								<view class="address_list_item_content_kongbai_bottom">
									<label style="display: flex;flex-direction: row;align-items: center;font-size: 13px;color: #666;" :data-id='item.id' @click.stop="radioChange">
										<view class="radio-item" v-if="item.is_default != 1"></view>
											<!-- <view class="radio-item-select" v-if="item.is_default == 1">
												<view class="radio-item-select-gou"></view>
											</view> -->
										<image class="dui_img" :src="duiguo_img" v-if="item.is_default == 1" mode=""></image>
										
										默认地址
									</label>
									<view class="">
										<image class="enit-img" :src="enit_img" mode="" @click.stop="gotoEnit" :data-id='item.id'></image>
										<image class="delete-img" :src="delete_img" mode="" @click.stop="gotoDelet" :data-id='item.id'></image>
									</view>
								</view>
							</view>
						</view>
					</view>
			</checkbox-group>
		</view>
		
		
		<view style="width: 100%;height: 100px;"></view>
		<view class="caozuo-box" v-if="!caozuoTF">
			<view class="caozuo-grborder-btn" @click="mangerBtnFun">
				管理地址
			</view>
			<view class="caozuo-green-btn" @click="gotoAdd">
				新增地址
			</view>
		</view>
		<view class="caozuo-box" v-else="caozuoTF">
			<view class="caozuo-green-btn" @click="caozuoTF = !caozuoTF;radioTF = !radioTF" >
				完成
			</view>
			<view :data-length='selectArray.length' @click="gotoDelet" :class="['caozuo-grey-btn',deleteTF ? 'caozuo-grey-btn-ative' : '']" >
				删除
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	export default {
		data(){
			return{
				type:'',
				search_img:baseUrl+'/uploads/static/image/recovery_address_manage_icon_search@2x.png',
				enit_img:baseUrl+'/uploads/static/image/recovery_address_manage_icon_edit@2x.png',
				delete_img:baseUrl+'/uploads/static/image/recovery_address_manage_icon_delete@2x.png',
				duiguo_img:baseUrl+'/uploads/static/image/recovery_pubilc_sel_frame_face@2x.png',
				search:'',
				
				caozuoTF:false,
				radioTF:false,
				addressList:[],
				selectArray:[],//选中地址ID
				deleteTF:false,
				pages:1,
			}
		},
		onLoad(options){
			this.type = options.type
			// this.getInfoNews(1)
		},
		onShow() {
			this.addressList = []
			this.getInfoNews(1)
		},
		onReachBottom(){
			this.pages = this.pages+1
			this.getInfoNews(this.pages)
		},
		methods:{
			select_address(e){
				if(this.type == 'select_address'){
					let select_index = e.currentTarget.dataset.index
					let id = this.addressList[select_index].id 
					let address_text = this.addressList[select_index].province +this.addressList[select_index].city+this.addressList[select_index].area +this.addressList[select_index].street_name +this.addressList[select_index].address
					
					uni.setStorageSync('address_id',id)
					uni.setStorageSync('address_text',address_text)
					uni.redirectTo({
						url:'/pages/recover/recover'
					})
					
				}
			},
			mangerBtnFun(){
				//初始化
				this.radioTF = true
				this.caozuoTF = true
				this.selectArray = []
				this.deleteTF = false
				this.addressList.forEach((item,index)=>{
					item.checked = false
				})
			},
			changeFun(e){
				let _this = this
				this.selectArray = e.detail.value
				if(e.detail.value.length > 0){
					this.deleteTF = true
				}else{
					this.deleteTF = false
				}
				this.addressList.forEach((item,index)=>{
					item.checked = false //初始化为false
					_this.selectArray.forEach((items,index)=>{
						if(item.id == items){
							item.checked = true
						}
					})
				})
			},
			radioChange(e){
				//修改默认地址
				let addressId = e.currentTarget.dataset.id
				let _this = this
				http.getUserAddressDefault({id:addressId}).then((res)=>{
					if(res.data.code == 1){
						_this.addressList.forEach((item,index)=>{
							if(item.id == addressId){
								_this.addressList[index].is_default = 1
								return false
							}else{
								_this.addressList[index].is_default = 0
							}
						})
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:'none'
						})
					}
				})
			},
			gotoEnit(e){
				//跳转编辑地址
				uni.navigateTo({
					url:'/pages/my/addressAddEnit?id='+e.currentTarget.dataset.id
				})
			},
			gotoDelet(e){
				//删除地址
				let _this = this
				if(e.currentTarget.dataset.id){
					//右边单个删除
					this.selectArray = [e.currentTarget.dataset.id]
				}else{
					//左边多个删除
					if(this.selectArray.length <= 0){
						return false
					}
				}
				uni.showModal({
					title: '提示',
					content: '是否删除该些地址？',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading()
							http.getUserAddressDelete({ids:_this.selectArray.toString()}).then((res)=>{
								console.log(res)
								uni.hideLoading()
								if(res.data.code == 1){
									uni.showToast({
										title:'删除成功',
									})
									_this.addressList.forEach((item,index)=>{
										_this.selectArray.forEach((items,indexs)=>{
											if(items == item.id){
												_this.addressList.splice(index,1)
											}
										})
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gotoAdd(){
				//添加地址
				uni.navigateTo({
					url:'/pages/my/addressAddEnit?type='+this.type
				})
			},
			getInfoNews(pages){
				let _this = this
				uni.showLoading()
				http.getUserAddress({page:pages,keyword:_this.search}).then((res)=>{
					setTimeout(()=>{
						uni.hideLoading()
					},1000)
					if(res.data.code == 1){
						let data = res.data.data 
						_this.addressList = _this.addressList.concat(data)
						_this.addressList.forEach((item,index) =>{
							//每个添加个标识状态
							item.checked = false
						})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			gotoSearch(e){
				let text= e.detail.value
				this.search = text
				this.pages = 1
				this.addressList = []
				this.getInfoNews(this.pages)
			}
		}
	}
</script>

<style>
	.body-content{
		width: 100%;
		min-height:90vh;
		background: #F8F9FD;
	}
	.body-top-box{
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding: 15px 12px 10px 12px;
	}
	.search-box{
		width: 100%;
		height: 40px;
		border-radius: 5px;
		background: #F8F9FD;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 15px;
	}
	.search-img{
		width: 15px;
		height: 15px;
	}
	.search-input{
		width: calc(100% - 25px);
		font-size: 14px;
	}
	.address_list_box{
		width: 100%;
	}
	.address_list_item{
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		min-height: 135px;
		position: relative;
		margin-top: 15px;
	}
	.radio-btn{
		width: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: -60px;
		transition: 0.5s;
	}
	.checkYuan-btn .wx-checkbox-input,
	.checkYuan-btn .uni-checkbox-input{
		border-radius: 50%;
		margin-left: 13px;
	}
	.checkYuan-btn[checked] .wx-checkbox-input,
	.checkYuan-btn.checked .uni-checkbox-input{
		background-color: #00CB8B;
		border-color: #00CB8B !important;
		color: #ffffff !important;
	}
	
	/* .radio-item .wx-radio-input,
	.radio-item .uni-radio-input{
		border-radius: 0%;
	}
	.radio-item[checked] .wx-radio-input,
	.radio-item.checked .uni-radio-input{
		background-color: #00CB8B;
		border-color: #00CB8B !important;
		color: #ffffff !important;
	} */
	
	.radio-item{
		width: 14px;
		height: 14px;
		border: 1px solid #999;
		margin-right: 10px;
		border-radius: 3px;
	}
	.dui_img{
		width: 17px;
		height: 17px;
		margin-right: 10px;
	}
	.radio-item-select{
		width: 16px;
		height: 16px;
		border-radius: 5px;
		border: 1px solid #00CB8B;
		background: #00CB8B;
		overflow: hidden;
		position: relative;
		top: -1px;
		left: -1px;
		z-index: 10;
	}
	.radio-item-select-gou{
		width: 10px;
		height: 5px;
		position: absolute;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		margin-top: 3px;
		margin-left: 2px;
	}
		
	.address_list_item_content{
		width: 100%;
		position: absolute;
		left: 0;
		transition: 0.5s;
		box-sizing: border-box;
		padding:15px;
	}
	.address_list_item_content_kongbai{
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 10px;
		padding: 20px;
		height: 135px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.donghua-left{
		transform: translateX(60px);
	}
	.donghua-left-none{
		pointer-events: none;
	}
	.caozuo-box{
		width: 100%;
		height: calc(70px + env(safe-area-inset-bottom) /2);
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 5px 17px 0px 17px;
	}
	.caozuo-green-btn{
		width: 45%;
		height: 45px;
		text-align: center;
		line-height: 45px;
		color: #fff;
		background: #00CB8B;
		border-radius: 5px;
	}
	.caozuo-grey-btn{
		width: 45%;
		height: 45px;
		text-align: center;
		line-height: 45px;
		color: #fff;
		background: #CDCDCD;
		border-radius: 5px;
	}
	.caozuo-grey-btn-ative{
		background: #FF3232 !important;
	}
	.caozuo-grborder-btn{
		width: 44%;
		height: 43px;
		text-align: center;
		line-height: 45px;
		color: #00CB8B;
		border: 1px solid #00CB8B;
		background: #fff;
		border-radius: 5px;
	}
	.enit-img{
		width: 18px;
		height: 18px;
	}
	.delete-img{
		width: 18px;
		height: 18px;
		margin-left: 22px;
	}
	.address_list_item_name{
		width: 100%;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.address_list_item_name_text{
		margin-right: 10px;
	}
	.address_list_item_news{
		width: 100%;
		font-size: 12px;
		color: #999;
		margin-top: 10px;
	}
	.address_list_item_content_kongbai_bottom{
		display: flex;flex-direction: row;align-items: center;
		justify-content: space-between;
	}
</style>